import React from 'react'
import styles from '@/assets/css/confirm.module.css';

const RoomConfirm = () => {
    let navigate = React.Router.useNavigate();
    let [dateshow, SetDateshow] = React.useState(false)
    let [guestshow, SetGuestshow] = React.useState(false)
    let [couponshow, SetCouponshow] = React.useState(false)
    let [payshow, SetPayshow] = React.useState(false)
    let [guestlist, SetGuestlist] = React.useState([
        {
            id: 1,
            nickname: '张三'
        },
        {
            id: 2,
            nickname: '李四'
        },
        {
            id: 3,
            nickname: '王五'
        },
        {
            id: 4,
            nickname: '赵六'
        }
    ])
    let [couponlist, SetCouponlist] = React.useState([
        [
            {
                label: "抢购优惠券-88折",
                value: 1,
                rate: "0.88"
            },
            {
                label: "抢购优惠券-6折",
                value: 2,
                rate: '0.6'
            }
        ]
    ])
    //支付信息
    let [paylist, SetPaylist] = React.useState([[
        { label: '余额支付', value: 'money' },
        { label: '微信支付', value: 'wx' },
        { label: '支付宝支付', value: 'zfb' },
    ]])
    // 价格
    let [price, SetPrice] = React.useState(0)
    // 原价
    let [originprice, SetOriginprice] = React.useState(0)
    // 天数
    let [day, SetDay] = React.useState(0)

    //房间信息
    let [room, SetRoom] = React.useState({
        name: '寒署特价房',
        price: '66.00',
        state: '',
        thumb_text: require('@/assets/images/hotel1.jpg'),
        flag_text: ["推广优惠", "月租惠选", "满减优惠", "节假日优惠"],
        content: '',
        total: 10,
    })

    //订单信息
    let [order, SetOrder] = React.useState({
        roomid: 2,
        busid: '1',
        remark: '',
        //价格信息
        origin_price: room.price,
        price: '',
        //优惠券
        couponid: '',
        couponstr: '',
        //日期
        datestr: '',
        starttime: 0,
        endtime: 0,
        //住客
        guest: '',
        gueststr: '请选择住客信息',
        guestids: [],
        //支付方式
        paystr: '余额支付',
        pay: 'money'
    })

    //当订单信息有变化，就重新计算价格
    React.useEffect(() => {
        Total()
    }, [order])

    //计算价格
    const Total = () => 
    {
        var starttime = order.starttime
        var endtime = order.endtime

        //时间差
        var day: any = endtime - starttime
        day = day / 86400
        day = day.toFixed(0)
        day = parseInt(day)

        //原价 时间差*房间原价
        var origin_price = day * parseFloat(room.price)
        var price = origin_price

        //是否有选择优惠券
        if (order.couponid) 
        {
            var rate = 1
            var list: any = couponlist[0]
            //找寻当前所选择的优惠券信息
            list.map((item: any) => {
                if (item.value == order.couponid) 
                {
                    rate = item.rate
                }
            })

            //计算折扣后的价格
            price = origin_price * rate
        }

        //修改价格
        SetPrice(price)
        SetOriginprice(origin_price)
        SetDay(day)
    }

    // 日期选择
    const DateConfirm = (val: any) => 
    {

        SetDateshow(false)

        // `2024-03-20 - 2024-03-25`
        var datestr = `${new Date(val[0]).toLocaleDateString()} - ${new Date(val[1]).toLocaleDateString()}`

        //获取到开始时间和结束时间
        //标准时间转换为时间戳
        var starttime = Date.parse(new Date(val[0]).toLocaleDateString()) / 1000
        var endtime = Date.parse(new Date(val[1]).toLocaleDateString()) / 1000

        SetOrder({
            ...order,
            starttime,
            endtime,
            datestr
        })
    }

    // 住客选择
    const GuestChange = async (value: string[]) => 
    {
        var gueststr: any = []
        var guestids: any = []

        //循环遍历
        guestlist.map((item: any) => {
            if (value.includes(item.id)) 
            {
                gueststr.push(item.nickname)
                guestids.push(item.id)
            }
        })

        var str = gueststr.join('、')
        var ids = guestids.join(',')

        //设置订单数据
        SetOrder({
            ...order,
            gueststr: str,
            guest: ids,
            guestids
        })
    }

    // 优惠券选择
    const CouponChange = async (value: any) => 
    {

        SetCouponshow(false)

        var couponstr = ''

        //获取picker第一项
        var list: any = couponlist[0]

        list.map((item: any) => {
            if (item.value == value[0]) 
            {
                couponstr = item.label
            }
        })

        SetOrder({
            ...order,
            couponstr,
            couponid: value[0],
        })
    }

    // 支付方式
    const PayChange = async (value: any) => 
    {

        SetPayshow(false)

        var paystr = ''

        //获取picker第一项
        var list: any = paylist[0]

        list.map((item: any) => {
            if (item.value == value[0]) 
            {
                paystr = item.label
            }
        })

        SetOrder({
            ...order,
            paystr,
            pay: value[0],
        })
    }

    const ConfirmOrder = async () => 
    {
        // 余额支付
        if(order.pay == 'money')
        {
            navigate('/order/index')
        } 
        else 
        {
            navigate(`/room/pay?pay=${order.pay}`)
        }

    }


    return (
        <>
            <div className={styles.skeleton}>
                <div className={styles.detail}>
                    <div className={styles.thumb}>
                        <img src={room.thumb_text} alt="" />
                    </div>
                    <div className={styles.right}>
                        <p>{room.name}</p>
                        <p>￥{room.price} / 晚</p>
                        <div className={styles.tips}>
                            {room.flag_text && room.flag_text.map((flag: any, index: any) => <span key={index}> {flag} </span>)}
                        </div>
                    </div>
                </div>

                <div className={styles.skeleton_rect}>
                    {/* 入住日期 */}
                    <div className={styles.item}>
                        <label>入住日期</label>
                        <React.UI.Input type="text" className={styles.item_right} placeholder="请选择入住日期"
                            value={order.datestr} onClick={() => SetDateshow(true)} />
                    </div>
                    {/* 日期选择 */}
                    <React.UI.CalendarPicker
                        visible={dateshow}
                        min={new Date()}
                        selectionMode='range'
                        onClose={() => SetDateshow(false)}
                        onMaskClick={() => SetDateshow(false)}
                        onConfirm={DateConfirm}
                    >
                    </React.UI.CalendarPicker>


                    {/* 住客信息 */}
                    <div className={styles.item}>
                        <label>住客信息</label>
                        <div className={order.guestids.length > 0 ? styles.item_right : styles.item_rights} onClick={() => SetGuestshow(true)}>
                            {order.gueststr}
                        </div>

                        {/* 弹出层组件 */}
                        <React.UI.Popup
                            visible={guestshow}
                            onMaskClick={() => SetGuestshow(false)}
                            destroyOnClose
                        >
                            <div
                                style={{ height: '40vh', overflowY: 'scroll', padding: '20px' }}
                            >
                                <React.UI.CheckList
                                    multiple={true}
                                    defaultValue={order.guestids}
                                    onChange={GuestChange}
                                >
                                    {guestlist && guestlist.map((item: any, key: number) =>
                                        <React.UI.CheckList.Item key={key} value={item.id}>
                                            {item.nickname}
                                        </React.UI.CheckList.Item>
                                    )}
                                </React.UI.CheckList>

                                <React.UI.Button color="primary" block style={{ width: '100%' }} onClick={() => SetGuestshow(false)}>确认</React.UI.Button>

                            </div>
                        </React.UI.Popup>
                    </div>
                </div>

                {/* 优惠券 */}
                <div className={styles.skeleton_price}>
                    <div className={styles.tips}>优惠券</div>
                    <p>{order.couponstr}</p>
                    <React.UI.Button size="mini" color="primary" onClick={() => SetCouponshow(true)}>选择</React.UI.Button>

                    {/* 弹框选项 */}
                    <React.UI.Picker
                        columns={couponlist}
                        visible={couponshow}
                        onClose={() => SetCouponshow(false)}
                        onConfirm={CouponChange}
                    >
                    </React.UI.Picker>
                </div>

                {/* 支付方式 */}
                <div className={styles.skeleton_price}>
                    <div className={styles.tips}>支付方式</div>
                    <p>{order.paystr}</p>
                    <React.UI.Button size="mini" color="primary" onClick={() => SetPayshow(true)}>选择</React.UI.Button>

                    <React.UI.Picker
                        columns={paylist}
                        visible={payshow}
                        onClose={() => SetPayshow(false)}
                        onConfirm={PayChange}
                    >
                    </React.UI.Picker>
                </div>

                {/* 订单备注 */}
                <div className={styles.skeleton_price}>
                    <div className={styles.tips}>订单备注</div>
                    <React.UI.TextArea
                        placeholder="请输入订单备注"
                        showCount
                        maxLength={50}
                    />
                </div>

                {/* 费用 */}
                <div className={styles.skeleton_price}>
                    <div className={styles.tips}>房间费用</div>
                    <div className={styles.prices}>
                        <span>￥{originprice}</span>
                        <span>共 {day} 晚</span>
                    </div>
                </div>
            </div>

            <div className={styles.comfirm_foot_bar}>
                {price == originprice ?
                    <div className={styles.text}>
                        <span>总价:</span>
                        <span>￥{price}</span>
                    </div> :
                    <div className={styles.text}>
                        <span>优惠价格:</span>
                        <span>￥{price}</span>
                        <s>原价：￥{originprice}</s>
                    </div>
                }
                <React.UI.Button onClick={ConfirmOrder} color='primary' shape='rounded'>提交订单</React.UI.Button>
            </div>
        </>
    )
}

export default RoomConfirm;